<template>
   <div class="home">
      <div class="box1">
         <dv-border-box-11 title="数据可视化平台">
            <dv-scroll-board :config="scoreConfig"
                             style="width:95%;height:58%;padding-left: 35px;padding-top: 55px"/>
         </dv-border-box-11>
      </div>
      <div class="box4">
         <h3>薪资TOP5</h3>
         <dv-border-box-8>
            <dv-scroll-ranking-board class="salary" :config="salaryConfig"
                                     style="width:85%;height:95%;padding-top: 10px;padding-left: 25px"/>
         </dv-border-box-8>
      </div>
      <div class="box5">
         <h3>专业人数</h3>
         <dv-border-box-12>
            <dv-active-ring-chart class="major" :config="courseConfig"
                                  style="width:90%;height:90%;padding-top: 20px;padding-left: 20px"/>
         </dv-border-box-12>
      </div>
      <div class="box6">
         <h3>就业人数</h3>
         <dv-border-box-8 :reverse="true">
            <dv-capsule-chart class="job" :config="jobConfig" style="width:85%;height:80%"/>
         </dv-border-box-8>
      </div>
   </div>
</template>

<script>

import {scoreDataVisual} from "@/api/dataVisual";

export default {
   name: 'HomeView',
   data() {
      return {
         scoreConfig: {
            header: ['班级', '学号', '姓名', '科目', '成绩', '考试时间'],
            data: [
               ['java2424', '202407001','张三', 'springboot', '90', '2024-07-11'],   // [{},{}]
               ['行1列1', '行1列2', '行1列3', '行1列3', '行1列3', '行1列3'],
               ['行1列1', '行1列2', '行1列3', '行1列3', '行1列3', '行1列3'],
               ['行1列1', '行1列2', '行1列3', '行1列3', '行1列3', '行1列3'],
               ['行1列1', '行1列2', '行1列3', '行1列3', '行1列3', '行1列3'],
               ['行1列1', '行1列2', '行1列3', '行1列3', '行1列3', '行1列3'],
               ['行1列1', '行1列2', '行1列3', '行1列3', '行1列3', '行1列3'],
               ['行1列1', '行1列2', '行1列3', '行1列3', '行1列3', '行1列3']
            ],
            headerBGC: '#000000',
            evenRowBGC: '',
            oddRowBGC: '',
            align: ['center', 'center', 'center', 'center', 'center', 'center']
         },
         courseConfig: {
            data: [
               {
                  name: '周口',
                  value: 55
               },
               {
                  name: '南阳',
                  value: 120
               },
               {
                  name: '西峡',
                  value: 78
               },
               {
                  name: '驻马店',
                  value: 66
               },
               {
                  name: '新乡',
                  value: 80
               }
            ],
            lineWidth: 8
         },
         salaryConfig: {
            data: [
               {
                  name: '张三',
                  value: 12
               },
               {
                  name: '李四',
                  value: 10.5
               },
               {
                  name: '王五',
                  value: 13
               },
               {
                  name: '赵六',
                  value: 10
               },
               {
                  name: '新乡',
                  value: 11
               }
            ],
            unit: 'K',
         },
         jobConfig: {
            data: [
               {
                  name: '南阳',
                  value: 167
               },
               {
                  name: '周口',
                  value: 123
               },
               {
                  name: '漯河',
                  value: 98
               },
               {
                  name: '郑州',
                  value: 75
               },
               {
                  name: '西峡',
                  value: 66
               },
            ],
            colors: ['#e062ae', '#fb7293', '#e690d1', '#32c5e9', '#96bfff'],
            unit: '单位',
            showValue: true
         }
      }
   },
   methods: {
      scoreVisual() {
         scoreDataVisual().then(response => {
            let scoreList = response.data.scoreList  // [{},{},{}]
            let scoreData = scoreList.map(score => {   // [[],[],[]]
               return [
                  score.clazz,
                  score.studentNo,
                  score.studentName,
                  score.examContent,
                  score.score,
                  score.examTime
               ]
            })
            this.scoreConfig = {
               header: ['班级', '学号', '姓名', '科目', '成绩', '考试时间'],
               data: scoreData,
               headerBGC: '#000000',
               evenRowBGC: '',
               oddRowBGC: '',
               align: ['center', 'center', 'center', 'center', 'center', 'center']
            }
         })
      }

   },
   created() {
      this.scoreVisual()
   }
}
</script>

<style scoped>

.home {
   height: 85vh;
   width: 100%;
   display: grid;
   grid-template-rows: 1fr 1fr;
   grid-template-columns: repeat(3, 1fr);
   gap: 5px;
   background-image: url("@/assets/images/data.gif");
}

.box1, .box4, .box5, .box6 {
   padding: 0 5px;
   position: relative;
}

.box1 {
   grid-column: span 3;
}

.job {
   position: absolute;
   top: 40px;
   left: 30px;
}

h3 {
   text-align: center;
   color: white;
   position: absolute;
   left: 50%;
   top: 5px;
   transform: translateX(-50%);
}

</style>

